<template>
	<el-dialog v-model="showflag" :title="title" @close="cancel">
		<el-form :model="datalist">
			<el-form-item v-for="(item,index) in datalist" :key='index' :label="item.name" label-width="50"
				:rules="[{ required: true, message: '', trigger: 'blur' }]">
				<el-input v-if='item.type=="input"' v-model="item.value" autocomplete="off"
					:disabled='type==1?true:false' />

				<el-upload v-if='item.type=="upload"' class="avatar-uploader" name='image' :headers='headers'
					:action="url+'/admin/Sundry/uploadFile'" :show-file-list="false"
					:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
					<img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 100%;"/>
					<el-icon v-else class="avatar-uploader-icon">
						<Plus />
					</el-icon>
				</el-upload>
				
				
				<div v-if='item.type=="select_dq"'  class='box_ad'>
					
					<el-cascader v-model="item.value" :options="options" @change="handleChange" @expand-change="handleChange2" placeholder=''/>
					
					<view class="cont" v-if="addrs">
						{{addrs}}
					</view>
				</div>
			</el-form-item>
			<!-- <el-form-item label="Zones" label-width="140">
	        <el-select v-model="form.region" placeholder="Please select a zone">
	          <el-option label="Zone No.1" value="shanghai" />
	          <el-option label="Zone No.2" value="beijing" />
	        </el-select>
	      </el-form-item> -->
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="cancel">取消</el-button>
				<el-button type="primary" @click="queding">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		props: ['title', 'datalist', 'showflag', 'type'],
		data() {
			return {
				dialogFormVisible: true,
				form: {},
				rules: [],
				flagtype: 0, //0新增,1详情,2编辑
				imageUrl: '',
				url:'',
				addrs:'',//回显地址
				options:[],
				options2:''
			}
		},
		created() {
			this.url = this.$URL
			this.getbigcity()
		},
		
		methods: {
			queding() {
				if (this.flagtype == 1) {
					this.$emit('cancel', 'cancel')
				} else {
					this.$emit('queding', 'queding')
				}

			},
			cancel() {
				this.$emit('cancel', 'cancel')
			},
			handleAvatarSuccess(res, file) {
				console.log(res)
				this.imageUrl = this.url+'/logo/'+res.data.file
			},
			beforeAvatarUpload(file) {
				const isJPG = (file.type === 'image/jpeg'|| file.type ==='image/png');
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG、PNG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			
			//选择地区回调
			handleChange2(value) {
				this.addrs = ''
				if(value[1]){//点击的市区 获取区县数据
					this.getsmocity(value[0],value[1])
				}else{//点击的省份 获取市区数据
					this.getcity(value[0])
				}
			},
			// 区域选择回调
			handleChange: function(value) {
				
			},
			
			//获取省级数据
			getbigcity() {
				this.$post({url:'/admin/Sundry/getProvinceList',resolveall:true}).then(res => {
					res.data.forEach((item,index)=>{
						let obj={
							value:item.province_code,
							label:item.province_name,
							children:[]
						}
						this.options.push(obj)
					})
					let json = JSON.stringify(this.options)
					this.options2 = JSON.parse(json)
					console.log(this.options2)
				})
			},
			//获取市级数据
			getcity(id){
				this.$post({url:'/admin/Sundry/getCityList',resolveall:true,params:{province_code:id}}).then(res => {
					this.options.forEach((item2,index2)=>{
						if(id==item2.value&&item2.children[0].length==0){
							res.data.forEach((item,index)=>{
								let obj={
									value:item.city_code,
									label:item.city_name,
									children:[]
								}
								this.options[index2].children.push(obj)
							})
							console.log(this.options)
						}
					})
					
				})
			},
			//获取区级地区
			getsmocity(id1,id2){
				this.$post({url:'/admin/Sundry/getAreaList',resolveall:true,params:{city_code:id2}}).then(res => {
					this.options.forEach((item3,index3)=>{
						if(id1==item3.value){
							item3.children.forEach((item2,index2)=>{
								if(res.data.length==0){
									delete this.options[index3].children[index2].children
									let obj3 = JSON.parse(JSON.stringify(this.options[index3].children[index2]))
									this.options[index3].children.splice(index2,1)
									this.options[index3].children.push(obj3)
								}else{
									if(id2==item2.value&&item2.children.length==0){
											res.data.forEach((item,index)=>{
												let obj={
													value:item.area_code,
													label:item.area_name
												}
												this.options[index3].children[index2].children.push(obj)
											})
										}
								}
							
							})
						}
						
					})
					
				})
			}
		},
		computed:{
			headers(){
				return{
					token:this.$store.state.userInfo.token
				}
			}
		},
		watch: {
			type(newVal, oldVal) {
				this.flagtype = newVal
			}
		},
	}
</script>

<style lang="less" scoped>
	.el-form {
		width: 450px;
		left: 0;
		right: 0;
		margin: auto;

		/deep/ .el-form-item--default .el-form-item__label {
			width: 110px;
		}
	}

	::v-deep.el-dialog__header {
		border-bottom: 1px solid #eee;
	}

	/deep/ .el-dialog__body {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	/deep/ .el-upload{
		    text-align: center;
		    cursor: pointer;
		    outline: 0;
		    width: 3rem;
		    height: 200px;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    border: 1px solid #eee;
		    border-radius: 0.05rem;
	}
</style>
